import React, { Component } from 'react'
import Zccount from './zccountbook/zccount'
import Addcom from "./zccountbook/addcom"
import { Switch,Route,Redirect } from 'react-router-dom'
// 引入上下文
import CTX from './zccountbook/ctx'
export default class App extends Component {
  state={
    // 记帐本列表  sed：是否被选择 type ：1支出   2收入
    zccountlist:[
      {id:1,title:"兼职",ms:"外包写项目",total:5000,sed:false,type:2},
      {id:2,title:"购物",ms:"买了个lv",total:100,sed:false,type:1},
    ]
  }

  // 切换多选框sed的状态
  onChangesed=(id)=>{
    let newlist=[...this.state.zccountlist]
    newlist.forEach(v=>{
      if(v.id==id){
        return v.sed=!v.sed
      }
    })
    this.setState({zccountlist:newlist})
  }

  // 删除已完成
  dellist=()=>{
    let newlist=this.state.zccountlist.filter((v)=>{
      return !v.sed
    })
    this.setState({zccountlist:newlist})
  }

  //单删
  del=(id)=>{
    let newlist=this.state.zccountlist.filter(v=>{
      return v.id!==id
    })
    this.setState({zccountlist:newlist})
  }

  //添加
  add=(obj)=>{
    this.setState({zccountlist:[obj,...this.state.zccountlist]})
  }

  render() {
    return (<CTX.Provider value={{
      ...this.state,//状态全部传下去
      onChangesed:this.onChangesed,//多选框的状态
      dellist:this.dellist,
      del:this.del,
      add:this.add
      }}>
      <div>
          <Switch>
          <Route path="/zccount" component={Zccount}></Route>
          <Route path="/addcom" component={Addcom}></Route>
          <Redirect from="/" to="/zccount"></Redirect>
          </Switch>
      </div>
      </CTX.Provider>
    )
  }
}
